@charset "UTF-8";


body{ min-width:1200px;}
.title_box{ height:102px; line-height: 102px; text-align: center; background:url(../img/title-bg.png) no-repeat center center; font-size:40px; color:#fff;}

.auto{ width:1200px; margin:0 auto; height:100%; position:relative;}


.index_top{ height:903px;}

.indexlubo{ position:absolute; left:0; top:0; width:100%; overflow:hidden; min-width: 1200px;}
.indexcarousel{ /*width:400%;*/ display:block; width:100%;}
.indexcarousel li{ overflow:hidden; float:left; position:relative; height:903px; width:100%;} 
.indexcarousel li img{ width:1920px; height:903px; position:absolute; left:50%; top:0; margin-left:-960px;}
.indexlubo .partnerbtn{ position:absolute; bottom:52px; left:0; width:100%;}

.index_platform{ height:1166px; background:url(../img/second-bg.png) no-repeat center center; overflow:hidden;}
.index_platform p{ padding-top:255px; width:520px; font-size: 20px; line-height: 36px; color:#b9cee8; float:left;}

.index_product{ height:827px; position:relative; background:url(../img/move-bg.png) no-repeat center center;}
.game_box{ padding-left:119px; width:962px;position:relative; padding-top:183px;
	transform-style: preserve-3d;
	-webkit-perspective: 800px;
	-moz-perspective:800px;
	-ms-perspective:800px;
	-o-perspective:800px;
	perspective:800px;
}
.index_product .auto .syxyfb{ position:absolute; float:left; transition:all .5s ease;} 

.index_product .auto .middleimg{ transform: translate3d(0,0,0); opacity:1; z-index:2;}
.index_product .auto .topimg{ transform: translate3d(38px,-39px,-534px); opacity:0.6;}
.index_product .auto .toptopimg{ transform: translate3d(54px,-82px,-814px); opacity:0;}
.index_product .auto .bottomimg{ transform: translate3d(38px,468px,-534px); opacity:0.6;}
.index_product .auto .bottombottomimg{ transform: translate3d(54px,739px,-814px); opacity:0;}
.index_wrapper{ height:1704px; background:url(../img/forth-bg.jpg) repeat  0 0; overflow:hidden; position:relative; overflow:hidden;}
.index_wrapper_bg{ position:absolute; width:1920px; height:1117px; background:url(../img/index_wrapper_bg.png) no-repeat 0 0; left:50%; top:562px; margin-left:-960px;}

.index_partner{ height:444px; overflow:hidden; position:relative; background:#0f1014;}
.index_partner .auto h2{ margin-bottom:71px;}
.index_partner .partnerbtn a{cursor:default;}

.partner_bg_box{ position:absolute; top:103px; left:0; width:1200px; height:215px; padding-left:52px; box-sizing:border-box;}
.partner_bg_box div{ float:left; width:213px; height:213px; background:#141923; border:1px solid #222d3f; margin-right:5px;}
.indexpartner{position:relative; padding:182px 70px 124px;}

.newqkys{ padding-top:109px; margin-bottom:300px;}
.newqkys>li{ width:210px; height:240px; float:left; margin-left:113px; background:url(../img/lbx.png) no-repeat center center; position:relative;
	-webkit-perspective: 800px;
	-moz-perspective:800px;
	-ms-perspective:800px;
	-o-perspective:800px;
	perspective:800px;
}
.newqkys .newqkys_text{ position:absolute; left:50%; bottom:-78px; margin-left:-128px; width:256px; text-align: center; }
.newqkys h2{ font-size: 28px; color:#b9cee8; line-height:28px; height:40px;}
.newqkys p{ font-size: 16px; color:#b9cee8; height:16px; line-height: 16px;}
.newqkys .four_text{ margin-left:-140px;}

.newqkys .one_3d{background:url(../img/one3d.png) no-repeat center center; width:100%; height:100%;}
.newqkys .one_turn{background:url(../img/oneturn.png) no-repeat center center; width:100%; height:100%; position:absolute; left:0; top:0;
	-webkit-animation:float1 3s  linear infinite;
	-moz-animation:float1 3s  linear infinite;
	-ms-animation:float1 3s  linear infinite;
	-o-animation:float1 3s  linear infinite;
	animation:float1 3s  linear infinite;
}
@-webkit-keyframes float1{
	0%{-webkit-transform:rotateY(0deg);}
	100%{-webkit-transform:rotateY(360deg);}
}
@-moz-keyframes float1{
	0%{-moz-transform:rotateY(0deg);}
	100%{-moz-transform:rotateY(360deg);}
}
@-ms-keyframes float1{
	0%{-ms-transform:rotateY(0deg);}
	100%{-ms-transform:rotateY(360deg);}
}
@-o-keyframes float2{
	0%{-o-transform:rotateY(0deg);}
	100%{-o-transform:rotateY(360deg);}
}
@keyframes float1{
	0%{transform:rotateY(0deg)}
	100%{transform:rotateY(360deg)}
}

.newqkys .two_3d{background:url(../img/two3d.png) no-repeat center center; width:100%; height:100%;}
.newqkys .two_turn{background:url(../img/twoturn.png) no-repeat center center; width:100%; height:100%; position:absolute; left:0; top:0;
	-webkit-animation:float2 6s  linear infinite;
	-moz-animation:float2 6s  linear infinite;
	-ms-animation:float2 6s  linear infinite;
	-o-animation:float2 6s  linear infinite;
	animation:float2 6s  linear infinite;
}
@-webkit-keyframes float2{
	0%{-webkit-transform:rotateY(0deg);}
	100%{-webkit-transform:rotateY(360deg);}
}
@-moz-keyframes float2{
	0%{-moz-transform:rotateY(0deg);}
	100%{-moz-transform:rotateY(360deg);}
}
@-ms-keyframes float2{
	0%{-ms-transform:rotateY(0deg);}
	100%{-ms-transform:rotateY(360deg);}
}
@-o-keyframes float2{
	0%{-o-transform:rotateY(0deg);}
	100%{-o-transform:rotateY(360deg);}
}
@keyframes float2{
	0%{transform:rotate(0deg)}
	100%{transform: rotate(360deg)}
}

.newqkys .three_3d{background:url(../img/three3d.png) no-repeat center center; width:100%; height:100%;}
.newqkys .three_turn{background:url(../img/threeturn.png) no-repeat 0 0; width:165px; height:165px; position:absolute; left:19px; top:42px;
	transform:rotateX(300deg) rotateY(20deg) translateZ(10px);
	-webkit-animation:float3 6s  linear infinite;
	-moz-animation:float3 6s  linear infinite;
	-ms-animation:float3 6s  linear infinite;
	-o-animation:float3 6s  linear infinite;
	animation:float3 6s  linear infinite;
}
@-webkit-keyframes float3{
	0%{-webkit-transform:rotateZ(0deg);}
	100%{-webkit-transform:rotateZ(360deg);}
}
@-moz-keyframes float3{
	0%{-moz-transform:rotateZ(0deg);}
	100%{-moz-transform:rotateZ(360deg);}
}
@-ms-keyframes float3{
	0%{-ms-transform:rotateZ(0deg);}
	100%{-ms-transform:rotateZ(360deg);}
}
@-o-keyframes float3{
	0%{-o-transform:rotateZ(0deg);}
	100%{-o-transform:rotateZ(360deg);}
}
@keyframes float3{
	0%{transform:rotateX(300deg) rotateY(20deg) translateZ(10px) rotateZ(0deg)}
	100%{transform:rotateX(300deg) rotateY(20deg) translateZ(10px) rotateZ(360deg)}
}

.newqkys .four_3d{background:url(../img/four3d.png) no-repeat center center; width:100%; height:100%;}
.newqkys .four_turn{background:url(../img/fourturn.png) no-repeat center center; width:100%; height:100%; position:absolute; left:0; top:0;
	-webkit-animation:float4 3s  linear infinite;
	-moz-animation:float4 3s  linear infinite;
	-ms-animation:float4 3s  linear infinite;
	-o-animation:float4 3s  linear infinite;
	animation:float4 3s  linear infinite;
}
@-webkit-keyframes float4{
	0%{-webkit-transform:rotateY(0deg);}
	100%{-webkit-transform:rotateY(360deg);}
}
@-moz-keyframes float4{
	0%{-moz-transform:rotateY(0deg);}
	100%{-moz-transform:rotateY(360deg);}
}
@-ms-keyframes float4{
	0%{-ms-transform:rotateY(0deg);}
	100%{-ms-transform:rotateY(360deg);}
}
@-o-keyframes float4{
	0%{-o-transform:rotateY(0deg);}
	100%{-o-transform:rotateY(360deg);}
}
@keyframes float4{
	0%{transform:rotateY(0deg)}
	100%{transform:rotateY(360deg)}
}

.wrapper_brief{padding-left:55px; font-size: 20px; line-height: 44px; color:#b9cee8; width:1090px; margin-bottom:38px;}
.wrapper_video{ height:670px; position:relative;}
.wrapper_video #vedioplay{display:block; width:965px; height:485px; margin-left:124px; padding-top:106px; background:url(../img/mbtn-bg.png) no-repeat center 110px;}
.wrapper_video .wrapper_video_bg{ background:url(../img/mp4-bg.png) no-repeat center center; position:absolute; left:0; top:0; width:100%; height:100%;}
.site-wrapper i{ position:absolute;}

.quakecool{ float:left; width:611px; height:194px; background:url(../img/fifth-content.png) no-repeat 0 0; margin:245px 0 0 1px;}
.quakeceo{ float:right; width:473px; height:645px; background:url(../img/leader.png) no-repeat 0 0; margin:55px 0 0 0;}

.indexpartner>div{ float:left; width:180px; height:55px; margin-right:40px; 
    -webkit-perspective: 800px;
	-moz-perspective:800px;
	-ms-perspective:800px;
	-o-perspective:800px;
	perspective:800px; 
}
.indexpartner img{display:none;}
.indexpartner>div.just{
	transform:rotateY(90deg);
	-ms-transform:rotateY(90deg); 	
	-moz-transform:rotateY(90deg);
	-webkit-transform:rotateY(90deg);
	-o-transform:rotateY(90deg);
}

.indexpartner>div.negative{
	transform:rotateY(-90deg);
	-ms-transform:rotateY(-90deg); 	
	-moz-transform:rotateY(-90deg);
	-webkit-transform:rotateY(90deg);
	-o-transform:rotateY(-90deg);
}
.indexpartner>div.zero{
	transform:rotateY(0deg);
	-ms-transform:rotateY(0deg); 	
	-moz-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
}
.indexpartner .partnertrans{
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
.partnerbtn{ text-align: center;}
.partnerbtn>a{ display:inline-block; *display:inline; *zoom:1; width:8px; height:8px; background:url(../img/lunbo-gray-dot.png) no-repeat 0 0; margin-right:10px;}
.partnerbtn .btnshow{ background-image:url(../img/lunbo-red-dot.png);}



/* 旗下平台 */
#kukuleft{ transform:translateX(-600px); transition:all 1.5s ease; opacity:0; width:624px; float:left; margin-left:10px;}
#kukuright{ transform:translateX(600px); transition:all 1.5s ease; opacity:0; margin-top:10px; width:556px; float:right; margin-right:10px;}


.mobile-numbers{ width:530px; margin:0 auto; position:relative;}
.mobile-numbers ul{ float:left; margin-right:15px;}
.mobile-numbers li{ width:38px;/*  height:80px; border:1px solid #3768e4;  */ color:#fff;}
.mobile-numbers i{ position:absolute; width:10px; height:22px; background:url(../img/comma.png) no-repeat 0 0; top:55px;}



.mobile-numbers>div>ul.flip {
	width: 40px
}

.mobile-numbers ul.flip {
	position: relative;
	float: left;
	margin-right: 15px;
	width:40px;
	height: 82px;
	font-size: 62px;
	font-weight: 400;
	line-height: 80px;
	border-radius: 3px
}

.mobile-numbers ul.flip li {
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%
}

.mobile-numbers ul.flip li:first-child {
	z-index: 2
}

.mobile-numbers ul.flip li a {
	display: block;
	height: 80px;
	perspective: 200px;
	border-radius: 3px;
	zoom: 1;
	border: 1px solid #3768e4;
}


.mobile-numbers:hover ul.flip li a {
	box-shadow: 0 0 16px -4px #186ff0
}

.mobile-numbers ul.flip li a div {
	z-index: 1;
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	overflow: hidden
}

.mobile-numbers ul.flip li a div .shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	z-index:0\9;
}

.mobile-numbers ul.flip li a div.up {
	transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	top: 0
}


.mobile-numbers ul.flip li a div.down {
	transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	-webkit-transform-origin: 50% 0;
	bottom: 0
}

.mobile-numbers ul.flip li a div div.inn {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 200%;
	color: #fff;
	text-align: center;
	background: #132678;
	border-radius: 3px
}

.mobile-numbers ul.flip li a div.up div.inn {
	top: 0
}

.mobile-numbers ul.flip li a div.down div.inn {
	bottom: 0
}

.play ul li.before {
	z-index: 3
}

.play ul li.active {
	animation: asd .5s .5s linear both;
	-moz-animation: asd .5s .5s linear both;
	-ms-animation: asd .5s .5s linear both;
	-o-animation: asd .5s .5s linear both;
	-webkit-animation: asd .5s .5s linear both;
	z-index: 2
}
/* 
.ie7 .play ul li.active,.ie8 .play ul li.active,.ie9 .play ul li.active {
	z-index: 4
} */

@keyframes asd {
	0% {
		z-index: 2
	}

	100%,5% {
		z-index: 4
	}
}

@-moz-keyframes asd {
	0% {
		z-index: 2
	}

	100%,5% {
		z-index: 4
	}
}

@-webkit-keyframes asd {
	0% {
		z-index: 2
	}

	100%,5% {
		z-index: 4
	}
}

.play ul li.active .down {
	z-index: 2;
	animation: turn .5s .5s linear both;
	-moz-animation: turn .5s .5s linear both;
	-ms-animation: turn .5s .5s linear both;
	-o-animation: turn .5s .5s linear both;
	-webkit-animation: turn .5s .5s linear both
}

@keyframes turn {
	0% {
		transform: rotateX(90deg)
	}

	100% {
		transform: rotateX(0)
	}
}

@-moz-keyframes turn {
	0% {
		-moz-transform: rotateX(90deg)
	}

	100% {
		-moz-transform: rotateX(0)
	}
}

@-webkit-keyframes turn {
	0% {
		-webkit-transform: rotateX(90deg)
	}

	100% {
		-webkit-transform: rotateX(0)
	}
}

.play ul li.before .up {
	z-index: 2;
	animation: turn2 .5s linear both;
	-moz-animation: turn2 .5s linear both;
	-ms-animation: turn2 .5s linear both;
	-o-animation: turn2 .5s linear both;
	-webkit-animation: turn2 .5s linear both
}

@keyframes turn2 {
	0% {
		transform: rotateX(0)
	}

	100% {
		transform: rotateX(-90deg)
	}
}

@-moz-keyframes turn2 {
	0% {
		-moz-transform: rotateX(0)
	}

	100% {
		-moz-transform: rotateX(-90deg)
	}
}

@-webkit-keyframes turn2 {
	0% {
		-webkit-transform: rotateX(0)
	}

	100% {
		-webkit-transform: rotateX(-90deg)
	}
}

.play ul li.before .up .shadow {
	background: #132678;
	border-radius: 3px;
	animation: show .5s linear both;
	-moz-animation: show .5s linear both;
	-ms-animation: show .5s linear both;
	-o-animation: show .5s linear both;
	-webkit-animation: show .5s linear both
}

.play ul li.active .up .shadow {
	background: #132678;
	border-radius: 3px;
	animation: hide .5s .3s linear both;
	-moz-animation: hide .5s .3s linear both;
	-ms-animation: hide .5s .3s linear both;
	-o-animation: hide .5s .3s linear both;
	-webkit-animation: hide .5s .3s linear both
}

.play ul li.before .down .shadow {
	background: #132678;
	border-radius: 3px;
	animation: show .5s linear both;
	-moz-animation: show .5s linear both;
	-ms-animation: show .5s linear both;
	-o-animation: show .5s linear both;
	-webkit-animation: show .5s linear both
}

.play ul li.active .down .shadow {
	background: #132678;
	border-radius: 3px;
	animation: hide .5s .3s linear both;
	-moz-animation: hide .5s .3s linear both;
	-ms-animation: hide .5s .3s linear both;
	-o-animation: hide .5s .3s linear both;
	-webkit-animation: hide .5s .3s linear both
}

@keyframes show {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-moz-keyframes show {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes show {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes hide {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@-moz-keyframes hide {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@-webkit-keyframes hide {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}